<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
/* 全局基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HTML 基础设置：撑满视口 */
html {
  width: 100%;
  height: 100%;
}

/* Body 布局：左右各留 5% 空白（合计 10%），水平居中 */
body {
  width: 100%;
  margin: 0 0;          /* 水平居中（配合 padding 实现两侧空白） */
  padding: 1% 1%;           /* 左右各 5% 空白，合计 10% */
  min-height: 100vh;       /* 撑满视口高度 */
}

/* App 容器：继承 body 宽度，填充剩余空间 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 10px 0;         /* 上下留 10px 内边距，左右由 body 控制 */
  width: 100%;
  min-height: inherit;     /* 继承 body 的最小高度 */
}
</style>